<template>
  <div>
    <el-card>
      <div class="noptice-header flex items-center justify-between mb-5">
        <el-button type="primary" size="small" @click="createClick"
          >新增</el-button
        >
        <el-button type="primary" size="small">
          <el-icon>
            <Refresh />
          </el-icon>
        </el-button>
      </div>
      <div>
        <el-tree
          :data="tableList"
          :props="{
            children: 'child',
            label: 'name',
          }"
        >
          <template #default="{ node, data }">
            <el-tag :type="data.menu ? '' : 'info'">{{
              data.menu === 1 ? "菜单" : "权限"
            }}</el-tag>
            <el-icon v-if="data.icon" size="12" class="ml-2 mr-2">
              <component :is="data.icon"></component>
            </el-icon>
            <span>{{ data.name }}</span>
            <div class="ml-auto">
              <el-switch
                v-model="data.status"
                :active-value="1"
                :inactive-value="0"
              />
              <el-button type="primary" text @click.stop="editNoticeClick(data)"
                >修改</el-button
              >
              <el-button type="primary" text @click.stop="addrule(data.id)"
                >新增</el-button
              >
              <el-button type="primary" text @click="handleDelete(data.id)"
                >删除</el-button
              >
            </div>
          </template>
        </el-tree>
      </div>
    </el-card>

    <Drawer
      ref="DrawerRef"
      :title="title === 'add' ? '添加管理员' : '修改管理员'"
      @submit="submit"
    >
      <el-form ref="formRef" :model="fromData" label-width="100px">
        <el-form-item label="上级菜单" prop="username">
          <el-cascader
            v-model="fromData.rule_id"
            placeholder="请选择上级菜单"
            :options="options"
            :props="{
              value: 'id',
              label: 'name',
              children: 'child',
              checkStrictly: true,
              emitPath: false,
            }"
            clearable
          />
        </el-form-item>
        <el-form-item label="菜单/规则" prop="username">
          <el-radio-group v-model="fromData.menu" class="ml-4">
            <el-radio :label="1" size="small" border>菜单</el-radio>
            <el-radio :label="0" size="small" border>规则</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称" prop="username">
          <el-input v-model="fromData.name" placeholder="请输入菜单/权限名称" />
        </el-form-item>
        <el-form-item v-if="fromData.menu" label="菜单图标" prop="username">
          <iconSelect v-model="fromData.icon" />
        </el-form-item>

        <el-form-item v-if="!fromData.menu" label="请求方式" prop="username">
          <el-select v-model="fromData.method" placeholder="">
            <el-option
              v-for="item in ['GET', 'POST', 'PUT', 'DELETE']"
              :key="item"
              :value="item"
            >
              {{ item }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="前端路由"
          prop="frontpath"
          v-if="fromData.menu == 1 && fromData.rule_id > 0"
        >
          <el-input
            v-model="fromData.frontpath"
            placeholder="前端路由"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="!fromData.menu" label="后端规则" prop="username">
          <el-input v-model="fromData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="排序" prop="username">
          <el-input-number v-model="fromData.order" :min="1" :max="50" />
        </el-form-item>
      </el-form>
    </Drawer>
  </div>
</template>
<script setup>
import { ref } from "vue";
import Drawer from "@/components/Drawer/index.vue";
import iconSelect from "@/components/IconSelect/index.vue";

import {
  getRuleList,
  delRule,
  addRule,
  editRule,
  changStatus,
} from "@/api/rule.js";

import { useInitTable, useInitForm } from "@/composables/useCommon.js";

let options = ref([]);

const { tableList, getData, handleDelete } = useInitTable({
  getList: getRuleList,
  del: delRule,
  status: changStatus,
  onGetListSuccess: (res) => {
    options.value = res.data.rules;
    tableList.value = res.data.list;
  },
});

const {
  fromData,
  editId,
  rules,
  title,
  formRef,
  DrawerRef,
  createClick,
  submit,
  editNoticeClick,
} = useInitForm({
  fromData: {
    rule_id: 0, // 上级菜单ID
    menu: 1, // 是否是菜单，0否1是
    name: "", // 菜单/权限名称
    condition: "", //后端规则
    method: "GET", // 请求方式：
    status: 1,
    order: 50,
    icon: "AddLocation",
    frontpath: "", // 应前端路由路径 menu为1且rule_id>0时必填
  },
  create: addRule,
  updata: editRule,
  getData: getData,
});

const addrule = (id) => {
  createClick();
  fromData.rule_id = id;
};
</script>

<style>
.el-tree-node__content {
  padding: 20px 0;
}
</style>
